var API = require('API');
var popup = '<div class="picker-item truncate-item" ng-click="truncate()">[X]</div>'
    + '<div class="picker-item" \
    ng-repeat="shop in data|orderBy:[\'name\'] | filter:picker_filter" \
    ng-click=\'$event.stopPropagation();submit(shop)\'>{{shop.name}}</div>';

module.exports = function () {
    return {
        restrict: 'E',
        scope   : {
            shop: "="
        },
        template: '<div class="picker-content">'
        + '<div class="picker-input">'
        + '<input type="text" class="display" ng-show="!show" value="{{shop.name}}"">'
        + '<input type="text" class="input" ng-show="show" type="text" ng-model="picker_filter">'
        + '</div>'
        + '<div class="picker-menu" ng-show="show">'
        + popup
        + '</div>'
        + '</div>',

        replace   : true,
        controller: ['$scope', '$element', '$timeout', function ($scope, $element, $timeout) {
            console.log($scope.place_holder);
            $scope.data = [];
            API.member.shops(function (list) {
                $scope.$apply(function () {
                    $scope.data = list;
                });
            });

            var $overlay = $('<div/>').css({
                height    : '100%',
                width     : '100%',
                position  : 'fixed',
                top       : 0,
                left      : 0,
                background: "rgba(255,255,255,0)",
                "z-index" : "1"
            }).click(function () {
                $scope.$apply(function () {
                    $scope.show = false;
                    $overlay.detach();
                });
            });

            var items = [];
            var $input = $element.find('input.input');
            var $menu = $element.find('.picker-menu');
            var $display = $element.find('input.display');

            var close_menu = function () {
                $scope.show = false;
                $overlay.detach();
            };

            $scope.selected = -1;

            var reset_items = function () {
                $scope.selected = -1;
                items = $element.find('.picker-item').hover(function () {
                    items.removeClass('selected');
                    $(this).addClass('selected');
                }, function () {
                    $(this).removeClass('selected');
                });
            };
            var s = 0;
            $input.keydown(function (e) {
                var keyCode = e.keyCode;
                if (keyCode == 38) { // down
                    $(items).removeClass('selected');
                    if ($scope.selected !== -1) {
                        $scope.selected--;
                    }
                    if ($scope.selected == -1) {
                        //clear all the style
                    } else {
                        $(items[$scope.selected]).addClass('selected');
                    }
                    if (s <= 30) {
                        s = 0;
                        $menu.scrollTop(s);
                    } else {
                        s = s - 30;
                        $menu.scrollTop(s);
                    }
                }
                else if (keyCode == 40) {//up
                    if ($scope.selected < items.length - 1) {
                        $scope.selected++;
                    }
                    $(items).removeClass('selected');
                    $(items[$scope.selected]).addClass('selected');
                    if ($scope.selected >= 3) {
                        if (s >= $(items).length * 30 - 120) {
                            $menu.scrollTop(s);
                        } else {
                            $menu.scrollTop(s);
                            s = s + 30;
                        }
                    }
                }
                else if (keyCode == 13) {
                    //enter
                    if ($scope.selected > -1) {
                        $(items[$scope.selected]).trigger('click')
                    }
                    else {
                        //close the menu and leave the same
                        $scope.$apply(function () {
                            close_menu();
                        })
                    }
                }
                else if (keyCode == 27) {
                    $scope.$apply(function () {
                        close_menu();
                    })
                }
                else {
                    $scope.$apply(function () {
                        $timeout(function () {
                            reset_items();
                        });
                        // console.log(items);
                    });
                }
            });

            $display.focus(function () {
                $scope.$apply(function () {
                    $scope.show = true;
                    $overlay.appendTo($element.find('.picker-input'));
                    $timeout(function () {

                        reset_items();
                        $input[0].focus();
                        // console.log($input[0])
                    });
                });
            });

            //触发事件
            //$input.focus(function () {
            //    $timeout(function () {
            //        console.log($(".shop-picker-menu"));
            //        reset_items();
            //        $input[0].focus();
            //    });
            //    // API.shop.all(function (list) {
            //    //     $scope.$apply(function () {
            //    //         $scope.data = list;
            //    //         $timeout(function () {
            //    //             reset_items();
            //    //             $input[0].focus();
            //    //         });
            //    //     });
            //    // });
            //});

            //选中shop
            $scope.submit = function (shop) {
                $scope.shop = shop;
                $scope.shopname = shop.name;
                close_menu();
            };

            //清空事件
            $scope.truncate = function () {
                $scope.shop = {};
                $scope.shopname = '';
                close_menu();
            };

        }]
    }
};


// var API = require('API');
// module.exports = function () {
//     return {
//         restrict: 'E',
//         scope   : {
//             shop: "="
//         },
//         template:   '<div class="shop-picker dropdown">'
//                         +'<input type="text" class="shop-picker-input" data-toggle="dropdown">'
//                         +'<div class="shop-picker-menu dropdown-menu" aria-labelledby="dropdownMenu">'
//                             +'<div class="shop-picker-item" ng-click="truncate()">[ X ]</div>'
//                             +'<div class="shop-picker-item" ng-repeat="shop in data|orderBy:[\'name\'] ng-click=\'submit(shop)\'>{{shop.name}}</div>'
//                         +'</div>'
//                     +'</div>',

//         replace   : true,
//         controller: ['$scope', '$element', '$timeout', function ($scope, $element, $timeout) {

//             $scope.data = [];
//             $scope.show = false;
//             $scope.picker_filter = "";
//             var $overlay = $('<div/>').css({
//                 height    : '100%',
//                 width     : '100%',
//                 position  : 'fixed',
//                 top       : 0,
//                 left      : 0,
//                 background: "rgba(255,255,255,0.0)",
//                 "z-index" : "-1"
//             }).click(function () {
//                 $scope.$apply(function () {
//                     $scope.show = false;
//                     $overlay.detach();
//                 });
//             });

//             var close_menu = function () {
//                 $scope.show = false;
//                 $overlay.detach();
//             };

//             var items = [];

//             $scope.selected = -1;

//             var reset_items = function () {
//                 $scope.selected = -1;
//                 items = $element.find('.picker-item').hover(function () {
//                     items.removeClass('selected');
//                     $(this).addClass('selected');
//                 }, function () {
//                     $(this).removeClass('selected');
//                 });
//             };

//             var $input = $element.find('input.input');
//             var $display = $element.find('input.display');
//             var s = 0;
//             $input.keydown(function (e) {
//                 var keyCode = e.keyCode;
//                 if (keyCode == 38) { // down
//                     $(items).removeClass('selected');
//                     if ($scope.selected !== -1) {
//                         $scope.selected--;
//                     }
//                     if ($scope.selected == -1) {
//                         //clear all the style
//                     } else {
//                         $(items[$scope.selected]).addClass('selected');
//                     }
//                     if (s <= 30) {
//                         s = 0;
//                         $(".picker-menu").scrollTop(s);
//                     }else{
//                         s = s - 30;
//                         $(".picker-menu").scrollTop(s);
//                     }
//                 }
//                 else if (keyCode == 40) {//up
//                     if ($scope.selected < items.length - 1) {
//                         $scope.selected++;
//                     }
//                     $(items).removeClass('selected');
//                     $(items[$scope.selected]).addClass('selected');

//                     if ($scope.selected >= 3) {
//                         if (s >= $(items).length*30 - 120) {
//                             $(".picker-menu").scrollTop(s);
//                         }else{
//                             $(".picker-menu").scrollTop(s);
//                             s = s + 30;
//                         }
//                     }
//                     console.log($(items).length*30);
//                 }
//                 else if (keyCode == 13) {
//                     //enter
//                     if ($scope.selected > -1) {
//                         $(items[$scope.selected]).trigger('click')
//                     }
//                     else {
//                         //close the menu and leave the same
//                         $scope.$apply(function () {
//                             close_menu();
//                         })
//                     }
//                 }
//                 else if (keyCode == 27) {
//                     $scope.$apply(function () {
//                         close_menu();
//                     })
//                 }
//                 else {
//                     $scope.$apply(function () {
//                         $timeout(function () {
//                             reset_items();
//                         });
//                     });
//                 }
//             });

//             //触发事件
//             $display.focus(function () {
//                 API.shop.all(function (list) {
//                     $scope.$apply(function () {
//                         $scope.show = true;
//                         $scope.data = list;
//                         $overlay.appendTo($element.find('.picker-menu'));
//                         $timeout(function () {
//                             reset_items();
//                             $input[0].focus();
//                         });
//                     });
//                 });
//             });

//             //选中shop
//             $scope.submit = function (shop) {
//                 $scope.shop = shop;
//                 close_menu();
//             };

//             //清空事件
//             $scope.truncate = function () {
//                 $scope.shop = {};
//                 close_menu();
//             };

//         }]
//     }
// };